<template>
  <el-form ref="tagsformlist" :model="tagsform" label-width="80px" size="mini" :rules="tagsformrules" >
  <!-- 所属学科 -->
  <el-form-item label="所属学科" prop="subjectName" >
     <el-select v-model="tagsform.subjectName" placeholder="请选择" style="width: 100%;" @change="changeselect(tagsform.subjectName)" >
        <el-option
        v-for="item in subjects"
        :key="item.id"
       :label="item.subjectName"
       :value="item.id">
    </el-option>
    </el-select>
  </el-form-item>
  <!-- 标签名称 -->
   <el-form-item label="标签名称" prop="tagName">
    <el-input v-model="tagsform.tagName" ></el-input>
  </el-form-item>
    <el-form-item>
    <el-button @click="cancleadd">取消</el-button>
    <el-button type="primary" @click="addsure">确认</el-button>

  </el-form-item>
  </el-form>
</template>

<script>
import { add, update } from '@/api/hmmm/tags'
import { mapActions } from 'vuex'
export default {
  created () {
    this.getsubjectlist()
    this.databack()
  },

  name: 'TagsForm',
  props: {
    tagrow: {
      type: Object

    },
    isupdate: {
      type: Boolean,
      required: true
    }

  },

  data () {
    return {
      // 添加标签数据
      tagsform: {
        subjectName: '',
        tagName: '',
        subjectID: '',
        id: ''
      },
      tagsformrules: {
        subjectName: [{ required: true, message: '请选择学科名称', trigger: 'change' }],
        tagName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },

      // 获取所有的学科目录
      subjects: this.$store.state.subjectlist.subjectData

    }
  },
  methods: {
    ...mapActions('subjectlist', ['getsubjectlist']),
    changeselect (id) {
      this.tagsform.subjectID = id
    },
    // 数据回填
    databack () {
      if (this.isupdate) {
        this.tagsform.tagName = this.tagrow.tagName
        this.tagsform.subjectID = this.tagrow.subjectID
        this.tagsform.id = this.tagrow.id
        this.tagsform.subjectName = this.tagrow.subjectName
      }
    },
    // 取消
    cancleadd () {
      this.$emit('close')
    },
    // 确认
    addsure () {
      // 兜底验证 清空表单数据 重置校验
      // 兜底验证
      this.$refs.tagsformlist.validate(async (valid) => {
        if (!valid) return
        if (this.isupdate) {
          //   console.log(this.tagsform)
          await update(this.tagsform)
          this.$message.success('更改标签成功')
        } else {
          await add(this.tagsform)
          // 重置表单
          this.$refs.tagsformlist.resetFields()
          this.$message.success('新增标签成功')
        }
        this.$emit('close')
      })
    }
  }

}
</script>

<style>

</style>
